<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>确认订单</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/active.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/picker.css"/>
<link rel="stylesheet" type="text/css" href="css/shopCar.css"/>
<link rel="stylesheet" type="text/css" href="css/address.css"/>
<link rel="stylesheet" type="text/css" href="css/weal.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/picker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/address.js" type="text/javascript" charset="utf-8"></script>
<script src="js/personal_weal.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	
<div id="slideBar">
	<a class="shopCar flex-col" href="shopCar.html">
		<span class="icon"><img src="image/icon/slide-icon.png" /></span>
		<span class="num">5</span>
	</a>
	<a class="contact flex-col" href="tel:110">
		<span class="icon"><img src="image/icon/slide-icon.png" /></span>
	</a>
</div>

<footer class="footer top-line main-line flex-row" id="bottomBtn">
	<div class="txt tl flex-full">合计：￥<span id="totalVal">1200.00</span></div>
	<a class="btn" href="enterOrder.html">去付款</a>
</footer>

<div class="swiper-container Main" id="Main">
	<div class="swiper-wrapper">
		<div class="swiper-slide content">
			
			<div class="children" id="shopCar">
				
				<!--配送方式-->
				<div class="sendMod bg-w dm-mt dm-mb">
					<div class="bt bottom-line">配送方式</div>
					<ol class="wayMod bottom-line">
						<li class="flex-row on way-1 dm-left" onclick="selWay(this,0)">
							<span class="icon"></span>门店自提
						</li>
						<li class="flex-row way-2 dm-left" onclick="selWay(this,1)">
							<span class="icon"></span>快递到家
						</li>
					</ol>
					<!--选择门店-->
					<ul class="selStore h5 bottom-line arrow" onclick="openSubMain('#selStore');">
						<li class="name dm-left">选择门店</li>
						<li class="dm-right tr store">
							<span class="storeName dm-wrap">志邦厨柜（蜀山区门店)</span>
						</li>
					</ul>
					<!--选择地址-->
					<ul class="selAddr arrow h5" style="display: none;" onclick="openSubMain('#selAddress')">
						<li class="name">曹伟 18756197235</li>
						<li class="address">安徽省合肥市蜀山区西湖国际广场C座</li>
					</ul>
				</div>
				
				<div class="dm-norlist bg-w dm-mb" id="resPhone">
					<ul class="input flex-row">
						<li class="name">预留电话</li>
						<li class="cot flex-full">
							<input type="tel" class="max-input tr" placeholder="请输入您的电话，方便与您联系" />
						</li>
					</ul>
				</div>
				
				<!--商品信息-->
				<div class="shopMod bg-w">
					<ul class="shopBox bottom-line flex-row">
						<li class="photo cover">
							<img src="image/test/pro-1.png" />
						</li>
						<li class="info flex-full">
							<ol class="name-box flex-row">
								<li class="name-l flex-full">
									<h5 class="name">这里是商品名称这里是商品名称这里是商品名称</h5>
									<h6 class="spec">红色;12寸;微辣</h6>
								</li>
							</ol>
							<ol class="val-box dm-clearfix">
								<li class="val dm-left">￥<span class="singleVal">1200.00</span></li>
								<li class="box flex-row dm-right h6">×2</li>
							</ol>
						</li>
					</ul>
				</div>
				
				<!--价格信息-->
				<div class="dm-norlist bg-w dm-mt dm-mb">
					<ul class="list bottom-line flex-row">
						<li class="name">商品总价</li>
						<li class="cot tr flex-full">￥1200.00</li>
					</ul>
					<ul class="list bottom-line flex-row arrow" onclick="openSubMain('#selWeal')">
						<li class="name">优惠券</li>
						<li class="cot tr flex-full red">￥10.00</li>
					</ul>
					<ul class="list bottom-line flex-row">
						<li class="name">积分抵扣</li>
						<li class="cot flex-full">
							<label class="flex-row flex-right">扣除60积分<span class="red">(￥30.00)</span><input type="checkbox" /></label>
						</li>
					</ul>
					<ul class="list bottom-line flex-row">
						<li class="name">会员折扣</li>
						<li class="cot tr flex-full">95折</li>
					</ul>
					<ul class="list flex-row">
						<li class="name">运费</li>
						<li class="cot tr flex-full">￥10.00</li>
					</ul>
				</div>
				
			</div>
			
		</div>
	</div>
</div>


<!--选择门店-->
<div class="subMain" id="selStore">
	<header class="header bottom-line main-line">
		<a class="left_icon back_btn" data-type='1'></a>
		<h4 class="title">选择门店</h4>
	</header>
	<div class="subNav dm-clearfix">
		<div class="sel dm-left">安徽省合肥市蜀山区</div>
		<div class="dm-right btn" onclick="createAreaPick()">筛选</div>
	</div>
	<div class="Main swiper-container" id="allStore">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children">
					
					<div class="store-list">
						<ul class="box bottom-line" onclick="selCurStore(this)">
							<li class="name h4">合肥金都华庭三期北门商铺店</li>
							<li class="phone h6">联系电话：18323234545</li>
							<li class="address">安徽省合肥市庐阳区新华街道金都华庭3期北门105</li>
						</ul>
					</div>
					
				</div>
				
			</div>
		</div>
	</div>
</div>
<!--选择门店 end-->

<!--选择收货地址-->
<div class="subMain" id="selAddress">
	
	<header class="header bottom-line main-line">
		<a class="left_icon back_btn" data-type='1'></a>
		<h4 class="title">选择收货地址</h4>
	</header>
	
	<footer class="footer top-line main-line">
		<button type="button" class="max-btn" onclick="addAddr()">新增收货地址</button>
	</footer>
	
	<div class="swiper-container Main" id="addressMod">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children" id="address">
					
					<ul class="add-list dm-mb">
						<div class="list" onclick="closeSubMain($(this).parents('.subMain'))">
							<li class="name">王多余 18756197235</li>
							<li class="address">安徽省合肥市庐阳区与北城大道交口创智工投天地A23栋北大青鸟2-29399983764</li>
						</div>
						<li class="btn-wrap dm-clearfix">
							<div class="default dm-left h5">
								<label class="flex-row"><input type="radio" name="default" />设为默认地址</label>
							</div>
							<div class="btn-box flex-row dm-right">
								<button type="button" onclick="editAddr(this)">编辑</button>
								<button type="button" onclick="delAddr(this)">删除</button>
							</div>
						</li>
					</ul>
					
				</div>
				
			</div>
		</div>
	</div>
</div>
<!--选择收货地址 end-->

<!--新增收货地址-->
<div class="subMain" id="addAddressMask">
	<header class="header bottom-line main-line">
		<a class="back_btn left_icon" data-type='1'></a>
		<h4 class="title">新增收货地址</h4>
	</header>
	<div class="Main swiper-container" id="addAddress">
		<div class="swiper-slide content">
			
			<div class="children">
				<form action="">
					<div class="dm-norlist bg-w dm-mt">
						<ul class="input flex-row bottom-line">
							<li class="flex-full cot">
								<input type="text" class="max-input" placeholder="收货人姓名" />
							</li>
						</ul>
						<ul class="input flex-row bottom-line">
							<li class="flex-full cot">
								<input type="tel" class="max-input" placeholder="手机号码" />
							</li>
						</ul>
						<ul class="input flex-row bottom-line arrow" onclick="createAreaPick()">
							<li class="name">省、市、区</li>
							<li class="flex-full cot">
								<input type="text" class="max-input tr" value="安徽省合肥市蜀山区" readonly="readonly" />
							</li>
						</ul>
						<ul class="input flex-row">
							<li class="flex-full cot">
								<textarea class="h5" name="" rows="3" cols="" placeholder="详细地址"></textarea>
							</li>
						</ul>
					</div>
					
					<button type="button" class="submitBtn" onclick="closeSubMain($(this).parents('.subMain'))">保存</button>
				</form>
				
			</div>
			
		</div>
	</div>
</div>
<!--新增收货地址 end-->

<!--选择优惠券-->
<div class="subMain" id="selWeal">
	<header class="header bottom-line main-line">
		<a class="back_btn left_icon" data-type='1'></a>
		<h4 class="title">选择优惠券</h4>
	</header>
	<div class="swiper-container Main" id="allWeal">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children" id="weal">
					
					<!--优惠券福利-->
					<div class="wealMod homeMod" style="padding-top: 14px;">
						
						<div class="weal-wrap">
							
							<ul class="weal-box" v-for="(item,index) in wealData" :type="item.statu" v-if='item.statu == 0'>
								<li class="main-info flex-row" @click="selCur($event)">
									<div class="val">
										<span class="unit">￥</span>{{item.val}}
									</div>
									<div class="flex-full info flex-row">
										<dl class="flex-full">
											<dt>{{item.type}}</dt>
											<dd>{{item.start}} ~ {{item.end}}</dd>
										</dl>
									</div>
								</li>
								<li class="ex-info flex-row" @click="controlRuler($event)">
									<div class="flex-full ruler animate dm-wrap">{{item.rule}}</div>
									<a class="btn animate"></a>
								</li>
							</ul>
							
						</div>
						
					</div>	
					<!--优惠券福利 end-->
					
				</div>
				
			</div>
		</div>
	</div>
	
</div>
<!--选择优惠券 end-->

<script type="text/javascript">
//复制商品数据
new copy('.shopMod',2).data();
pullSwiper('#Main');


//复制门店列表数据
new copy('.store-list',10).data();
pullSwiper('#allStore',true);

//复制收货地址
new copy('#address',9).data();
pullSwiper('#addressMod');

function reload(pull){
	pull.innerHTML = '已加载全部数据';
};

//选中门店
function selCurStore(obj){
	var target = $(obj).parents('.subMain');
	closeSubMain(target);
};


//选择配送方式
function selWay(obj,type){
	$(obj).addClass('on').siblings().removeClass('on');
	if(type==0){
		//自提
		$(".sendMod .selStore").show();
		$(".sendMod .selAddr").hide();
		$("#resPhone").show()
	}else{
		//快递
		$(".sendMod .selStore").hide();
		$(".sendMod .selAddr").show();
		$("#resPhone").hide()
	};
};
</script>

</body>
</html>
